<template>
  <!-- 页面全局div -->
  <div class="courseVideo">
    <!-- 视频层背景色 -->
    <div style="background:#fff;">
      <!-- 视频层 -->
      <div style="width:1200px;margin:0 auto">
        <div style="height:80px"></div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>全部课程</el-breadcrumb-item>
          <!-- <el-breadcrumb-item>Java</el-breadcrumb-item> -->
          <el-breadcrumb-item>{{courseData2.courseTitle}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="video-div">
          <div style="float:left;height:500px">
            <video width="862px" height="490px" autoplay controls loop :src="videoUrl"></video>
            <!-- <video width="862px" autoplay controls loop>
                <source :src="videoUrl" type="video/mp4">
            </video> -->
            <!-- <video width="862px" height="" autoplay controls loop src="">
            </video> -->
            <div>
              <div style="cursor: pointer;" @click="handleStarClick()" v-if="this.bookmarkid == 0" class="butttt"><span><i  class="el-icon-star-off"> </i> 收藏</span></div>
              <div style="cursor: pointer;" @click="handleStarClick()" v-else class="butttt"><span><i  class="el-icon-star-on" style="color: #FFFF00;"></i>取消收藏</span></div>
              <div class="butttt"><span><i class="el-icon-chat-dot-round"> </i> 咨询</span></div>
            </div>
          </div>
          <div style="float:left;width:338px;height:500px">
            <div style="height:60px;text-align:center;display: grid;">
              <span style="line-height:80px;font-size:18px;text-align:center">课程目录</span>
            </div>
            <!-- 课程目录已购买 可点击 -->
            <div style="height:460px; overflow: auto;" v-if="this.courseData2.payType == '0' | this.ifsss == true">
              <ul style="padding-left:20px">
              <div style="margin-bottom:10px" v-for="(course, index) in courseData" :key="course.id" >
                <span>{{ index + 1 }}. {{ course.courseTitle }}</span>
                <li class="li-cc" @click="playVideo(unit.id)" v-for="unit in filteredCourseunitData(course.id)" :key="unit.id"><i class="el-icon-video-play" style="margin-right:11px;margin-top:5px"></i><span class="spanll">{{unit.unitInfo}}</span></li>
              </div>
              </ul>
            </div>
            <!-- 未购买课程 -->
            <div style="height:460px; overflow: auto;" v-else>
              <ul style="padding-left:20px">
              <div style="margin-bottom:10px" v-for="(course, index) in courseData" :key="course.id" >
                <span>{{ index + 1 }}. {{ course.courseTitle }}</span>
                <li class="li-cc" @click="playno" v-for="unit in filteredCourseunitData(course.id)" :key="unit.id"><i class="el-icon-video-play" style="margin-right:11px;margin-top:5px"></i><span class="spanll">{{unit.unitInfo}}</span></li>
              </div>
              </ul>
            </div>

          </div>
        </div>
        <div style="height:100px">
            <div style="float:left;margin-top:20px">
                <span style="font-size:25px">{{courseData2.courseTitle}}</span><span style="font-size:14px;margin-left:20px">{{courseData2.courseClick}}点击次数</span>
                <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}" style="margin-top:10px">
                </el-rate>
          </div>
          <!-- 收费课程购买 -->
            <div style="float:right;margin-right:40px;margin-top:20px" @click="buyCourse" v-if="this.courseData2.payType == '1' & this.ifsss == false">
                <el-button style="display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 25px; width: 200px;" type="primary">
                  <div style="display: flex; align-items: center;">
                    <i class="el-icon-plus" style="font-size: 30px; margin-right: 5px;"></i>
                    <span>购买课程</span>
                    <i></i>
                  </div>
                </el-button>
            </div>
            <!-- 免费课程没有购买按钮 -->
            <div style="float:right;margin-right:40px;margin-top:20px" v-else>
            </div>

        </div>
      </div>
    </div>
    <!-- 信息介绍层 -->
    <div style="width:1200px;margin:0 auto;margin-top:20px;overflow: hidden;width: auto;">
      <el-card class="card-1" style="width:820px;float:left;margin-bottom:40px;min-height:700px">
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> -->
        <el-tabs v-model="activeName" plain>
          <el-tab-pane label="课程介绍" name="first" >
            <div style="margin-top:20px;">
              <span><b>你将获得</b></span><br><div style="height:10px"></div>
              <span style="color:#586470;font-size:14px">{{courseData2.courseInfo}}</span>
            </div>
            <div style="margin-top:50px">
              <span><b>教学服务</b></span><div style="height:10px"></div>
              <div style="border: 1px solid #dcdfe6;padding:10px;height:90px;border-radius:10px">
               <div style="width:50%;float:left">
                  <div>
                    <span style="display: flex; align-items: center; color: #586470; font-size: 14px;">
                    <i class="el-icon-connection" style="font-size: 30px; margin-top: 5px;"></i>
                    <span style="margin-left: 5px;">教辅资料</span>
                  </span>
                  </div>
                  <div style="margin-top:20px">
                    <span style="display: flex; align-items: center; color: #586470; font-size: 14px;">
                    <i class="el-icon-connection" style="font-size: 30px; margin-top: 5px;"></i>
                    <span style="margin-left: 5px;">免费赠送讲义</span>
                  </span>
                  </div>
               </div>
               <div style="width:50%;float:left">
                  <div>
                    <span style="display: flex; align-items: center; color: #586470; font-size: 14px;">
                    <i class="el-icon-connection" style="font-size: 30px; margin-top: 5px;"></i>
                    <span style="margin-left: 5px;">可回放任意章节学习</span>
                  </span>
                  </div>
                  <div style="margin-top:20px">
                    <span style="display: flex; align-items: center; color: #586470; font-size: 14px;">
                    <i class="el-icon-connection" style="font-size: 30px; margin-top: 5px;"></i>
                    <span style="margin-left: 5px;">课程无时间限制长期有效</span>
                  </span>
                  </div>
               </div>
              </div>
            </div>
            <div style="margin-top:50px">
              <span><b>课程详细</b></span><br><div style="height:10px"></div>
              <img src="@/assets/9.jpg" style="width:780px">
            </div>
          </el-tab-pane>
          <!-- 课程目录 -->
          <el-tab-pane label="课程目录" name="second">
            <el-collapse>
              <el-collapse-item v-for="(item, index) in courseData" :key="index" :title="item.courseTitle" :name="index">
                  <li class="linbb" v-for="unit in filteredCourseunitData(item.id)" :key="unit.id"><i class="el-icon-video-play" style="margin-right:11px;margin-top:5px"></i><span class="spanll">{{ unit.unitInfo }}</span></li>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane label="课程评论" name="third">
            <div class="pinlun">
              <div style="width:70px;height:50px;border-radius:50%;float:left">
                <img src="@/assets/ailabeijing.jpg" style="width:50px;height:50px;border-radius:50%" >
              </div>
              <div style="float:left;width:700px;">
                <div style="font-size:15px">
                <span>你的名字</span>
                <span style="float:right;color: #586470;font-size:13px;">举报</span>
                <!-- <span style="float:right;color: #586470;font-size:13px;">删除</span> -->
                </div>
                <div style="font-size:13px;margin-bottom:15px;color: #586470;"><span>2023年8月21日</span></div>
                <div style="font-size:14px;margin-bottom:15px"><span>评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息</span></div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-card class="card-1" style="width:360px;height:100%;float:left;margin-left:20px">
        <div style="margin-bottom:30px;height:60px">
          <div style="width:80px;height:60px;border-radius:50%;float:left">
          <el-image :src="'http://101.43.223.224:8765/image/getImageById?id=' + this.tableData.teacherImg" style="width:60px;height:60px;border-radius:50%" ></el-image>
          </div>
          <div style="float:left;width:220px;">
            <span style="font-size:19px"><b>{{tableData.teacherName}}</b></span>
            <div style="height:10px"></div>
            <b><span>{{tableData.seniority}} <span class="xinspan">工龄</span>&nbsp;&nbsp;&nbsp;</span></b>
            <b><span>99% <span class="xinspan">好评</span>&nbsp;&nbsp;&nbsp;</span></b>
            <b><span>7988 <span class="xinspan">课程</span></span></b>
          </div>
        </div>
        <div >
          <span class="teacherInfo">{{courseData2.teacherInfo}}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseVideo',
  components: {},
  data () {
    return {
      activeNames: ['1'],
      value: 4.9,
      mulutitle: '目录标题666',
      activeName: 'first',
      tableData: {},
      courseData: [],
      courseData2: {},
      courseunitData: [],
      videoUrl: '',
      ifsss: false,
      bookmarkid: 0,
      userData: {},
      userid: {}, // 存储用户的id信息
      uspur: {}, // 存储源课程数组
      userpurchase: [], // 存放分割好的课程数组
      filePathData: ''
    }
  },
  mounted () {
    this.userid = JSON.parse(localStorage.getItem('user')).data
    this.selectUser()
    this.userData = JSON.parse(this.$route.query.roid) // 课程信息
    this.selectTeacher()
    this.selectCourse()
    this.selectCourseunit()
    this.selUser()
    this.getUser()
  },
  computed: {
    filteredCourseunitData () {
      return (courseId) => {
        return this.courseunitData.filter(unit => unit.courseId === courseId)
      }
    }
  },
  methods: {
    // 用户信息查询
    selectUser () {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('/CoursePc/queryByUser', {
            params: {
              userId: this.userid.id
            }
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.uspur = res.data.data.data
              resolve() // 执行成功的回调
            }
            this.loading = false // 加载圈绑定
          })
          .catch(() => {
            // this.myMessage('error', err),
          })
      })
    },
    // 用户课程收藏情况
    getUser () {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('/bookMark/getUser', {
            params: {
              uid: this.userid.id,
              cid: this.userData.id
            }
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.bookmarkid = res.data.data.data
              resolve() // 执行成功的回调
            }
          })
          .catch(() => {
            // this.myMessage('error', err),
          })
      })
    },

    selUser () {
      this.selectUser().then(() => {
        if (this.uspur.purchase !== null && this.uspur.purchase !== '') {
          this.userpurchase = this.uspur.purchase.split(',')
          if (this.userpurchase.includes(String(this.userData.id))) {
            this.ifsss = true
          }
        }
      })
    },
    buyCourse () {
      this.$router.push({
        path: '/Purchasecourses',
        query: {
          roid: JSON.stringify(this.userData)
        }
      })
    },
    // 教师信息查询
    selectTeacher () {
      this.$axios
        .get('/CoursePc/getTeacher', {
          params: {
            id: this.userData.teacherId
          }
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.data
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
        // this.myMessage('error', err),
        })
    },
    // 收藏按钮
    handleStarClick (seriesCourseById) {
      // 判断是否登录
      if (this.userid.id === null || this.userid.id === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          // eslint-disable-next-line no-undef
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 判断收藏状态 为0则添加收藏 不为0则移除收藏
        if (this.bookmarkid === 0) {
          const formData = new FormData()
          formData.append('uid', this.userid.id)
          formData.append('cid', this.userData.id)
          this.$axios.post('/bookMark/addBookMark', formData).then((res) => {
            this.bookmarkid = 1
            this.$message({
              message: '已加入收藏',
              type: 'success'
            })
          })
        } else {
          const formData = new FormData()
          formData.append('uid', this.userid.id)
          formData.append('cid', this.userData.id)
          this.$axios.post('/bookMark/delBookMarkCourse', formData).then((res) => {
            this.bookmarkid = 0
            this.$message({
              message: '已从收藏中移除',
              type: 'warning'
            })
          })
        }
      }
    },

    // 课程自动播放
    selectCourse () {
      // eslint-disable-next-line eqeqeq
      this.$axios
        .get('/CoursePc/selectCourse', {
          params: {
            tid: this.userData.id
          }
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.courseData = res.data.data.data
            this.courseData2 = this.courseData[0]
            // eslint-disable-next-line eqeqeq
            if (this.courseData2.payType == '0' | this.ifsss == true) {
              // 获取第一个视频的URL，并赋值给videoUrl变量
              if (this.courseData.length > 0) {
                const firstCourse = this.courseData[0] // 第一个课程
                const coursess = this.filteredCourseunitData(firstCourse.id)
                console.log(coursess)
                if (coursess.length > 0) {
                  this.playVideos(coursess[0].id)
                }
              }
            } else {
              this.$message.error('未购买此课程')
            }
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
          // this.myMessage('error', err),
        })
    },

    // 章节信息查询
    selectCourseunit () {
      this.$axios
        .get('/CoursePc/selectUnit')
        .then((res) => {
          if (res.data.code === 200) {
            this.courseunitData = res.data.data.data
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
        // this.myMessage('error', err),
        })
    },
    playno () {
      // 移除其他元素的 active 类   css样式
      const liElements = document.getElementsByClassName('li-cc')
      for (let i = 0; i < liElements.length; i++) {
        liElements[i].classList.remove('active')
      }
      // 添加当前元素的 active 类
      event.currentTarget.classList.add('active')
      this.$message.error('未购买此课程')
    },
    // 课程视频查看
    playVideo (id) {
      // 移除其他元素的 active 类   css样式
      const liElements = document.getElementsByClassName('li-cc')
      for (let i = 0; i < liElements.length; i++) {
        liElements[i].classList.remove('active')
      }
      // 添加当前元素的 active 类
      event.currentTarget.classList.add('active')
      // 方法
      this.$axios
        .get('/CoursePc/playVideo', {
          params: {
            fid: id
          }
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.videoUrl = res.data.data.data.filePath
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
        // this.myMessage('error', err),
        })
    },
    // 课程视频查看
    playVideos (fid) {
      // 方法
      this.$axios
        .get('/CoursePc/playVideo', {
          params: {
            fid: fid
          }
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.filePathData = res.data.data.data.filePath
            console.log(this.filePathData)
            this.videoUrl = this.filePathData
          }
          this.loading = false // 加载圈绑定
        })
        .catch(() => {
        // this.myMessage('error', err),
        })
    }
  }
}
</script>
<style>
.pinglun{
  padding-top:10px;
  padding-bottom:10px;
  border-top: 1px solid #edeff2;
  border-bottom: 1px solid #edeff2;
  min-height:120px;margin-bottom:10px
}
.xinspan{
  font-size:13px;
  color: #586470;
}
.teacherInfo{
  font-size:15px;
  display: inline-block;
  text-indent: 2em;
  margin-bottom:15px;
  color: #586470;
}
.el-tabs__header {
  border-bottom: none;
}
.courseVideo {
  margin-top: 80px;
  height: 100%;
  text-align: left;
  margin: 0 auto;
}
.video-div {
  width: 1200px;
  height: 540px;
  margin-top: 20px;
  color: #f5f5f5;
  border: 2px solid #1b2128;
  background: #1b2128;
}
.li-cc {
  list-style-type: none;
  padding-left: 10px;
  width: 280px;
}
.linbb{
  list-style-type: none;
  width: 100%;

}
.spanll {
  font-size: 14px;
  line-height: 30px;
}
.butttt {
  border-radius: 20px;
  height: 30px;
  background: #323c46;
  width: 100px;
  text-align: center;
  line-height: 30px;
  float: left;
  margin-top: 8px;
  margin-left: 20px;
}
.li-cc {
  cursor: pointer;
}

.li-cc.active {
  background-color: #000000;
  color: #00a2ff;
  border-radius: 10px;
}
.el-tabs__nav-wrap.is-top::after {
  display: none;
}
div::-webkit-scrollbar {
  width: 8px; /* 调整滚动条宽度 */
}

div::-webkit-scrollbar-track {
  background-color: transparent; /* 设置滚动条背景色为透明 */
}

div::-webkit-scrollbar-thumb {
   background-color: #888; /* 设置滚动条手柄颜色，这里使用了半透明黑色 */
}
</style>
